<template>
  <n-card :border="false">
    <n-alert :show-icon="false" class="m-b-10">
      <n-form :model="search_param" class="search-forms"
              inline
              :show-feedback="false"
              label-placement="left"
              @keydown.enter.prevent="handleSubmitSearch">
        <n-form-item label="昵称/电话">
          <n-input v-model:value="search_param.key" placeholder="输入昵称或电话号码查询" clearable/>
        </n-form-item>
        <n-form-item label="类型">
          <n-select v-model:value="search_param.status" :options="typeOption" style="width: 130px;" clearable/>
        </n-form-item>
        <n-form-item>
          <search-button-group @submit="handleSubmitSearch"
                               @reset="()=>(search_param.key=null,search_param.status=null)"/>
        </n-form-item>
      </n-form>
    </n-alert>
    <data-table ref="data_list"
                :columns="columns"
                :row-key="(row:Recordable) => row.id"
                :params="search_param"
                list-url="user/bcr_list"
                default-serial-number
                serial-number-title="序号">
    </data-table>
  </n-card>



</template>

<script setup lang="ts">
import {h, ref} from 'vue';
import SearchButtonGroup from '@components/SearchButtonGroup';
import {NAvatar, NEllipsis, NImage, SelectOption} from 'naive-ui';
import DataTable from '@components/DataTable';
import {Config} from "@/config";


const typeOption = ref<SelectOption[]>([
  {
    label: '加',
    value: 0,
  }, {
    label: '减',
    value: 1,
  }
])

const search_param = ref({
  key: null,
  status: null,
})
//数据表
const data_list = ref<any>();
const columns = ref([
  {
    title: '头像',
    key: 'avatar',
    width: 60,
    align: 'center',
    render(row: { avatar: string }) {
      if (row.avatar) {
        return h(NAvatar, {
          size:30,
          src:  Config.VIEW_FILE + row.avatar
        })
      }
    }
  }, {
    title: '昵称/电话',
    key: 'nickname',
    width: 150,
    render: (row: { nickname: string, phone: string }) => {
      return h('div', {style: {width: '100%'}}, {
        default: () => (
            [h(NEllipsis, {style: {display: 'block'}}, {default: () => (row.nickname)}),
              h('span', null, {default: () => (row.phone)})
            ])
      })
    }
  }, {
    title: '类型',
    key: 'type',
    width: 80,
    align: 'center',
    render(row: { type: boolean | number }) {
      const typeText = row.type == 0 ? '加' : '减';
      return h('span', null, {default: () => (typeText)})
    }
  },{
    title: '之前余额(元)',
    key: 'totalWithdrawal',
    width: 130,
    align: 'center',
    render(row: { beforeMoney: number }) {
      return h('span', null, {default: () => (row.beforeMoney.toFixed(2))})
    }
  }, {
    title: '变动余额(元)',
    key: 'money',
    width: 130,
    align: 'center',
    render(row: { money: number,type:number}) {
      const money = row.type===0?'+'+row.money.toFixed(2):'-'+row.money.toFixed(2)
      return h('span', null, {default: () => (money)})
    }
  }, {
    title: '之后余额(元)',
    key: 'totalWithdrawal',
    width: 130,
    align: 'center',
    render(row: { afterMoney: number }) {
      return h('span', null, {default: () => (row.afterMoney.toFixed(2))})
    }
  },
  {
    title: '来源',
    key: 'sourceText',
    width: 130,
  },  {
    title: '备注',
    key: 'remark',
  }, {
    title: '操作人',
    key: 'adminName',
    width: 180,
    align: 'center',
  }, {
    title: '创建时间',
    key: 'createTime',
    width: 175,
  }
]);

//查询
const handleSubmitSearch = () => {
  data_list.value.searchListData();
}






</script>

<style scoped lang="scss">

</style>